<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<button id="n2">222222</button>
<p>123132123131</p>
<p>sdfsdfs</p>
<p>21er12e1r</p>
<button id="n5">555555</button>


<script src="../lib/jquery.js"></script>
<script>

	// ,用于trigger 自定义事件.

	$(document).ready(function(){
		$("p").on("custom.someNamespace",function(event){
			alert(event.namespace);
		});
		$("p").click(function(event){
			$(this).trigger("custom.someNamespace");
		});
		$("button").click(function(){
			$("p").off("custom.someNamespace");
		});
	});



//	function clickHandler(event){
//		alert( "触发时的命名空间:[" + event.namespace + "]");
//	}
//
//	var $p = $("p");
//
//	// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
//	$p.on( "click.foo.bar", clickHandler );

//	// B：为所有p元素绑定click事件，定义在test命名空间下
//	$p.on( "click.test", clickHandler );
//
//	var $n2 = $("#n2");
//
//	// 触发所有click事件
//	$n2.trigger("click"); // 触发A和B (event.namespace = "")
//
//	// 触发定义在foo命名空间下的click事件
//	$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
//	// 触发定义在bar命名空间下的click事件
//	$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
//	// 触发同时定义在foo和bar两个命名空间下的click事件
//	$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
//
//	// 触发定义在test命名空间下的click事件
//	$n2.trigger("click.test"); // 触发B (event.namespace = "test")
//
//	// 移除所有p元素定义在foo命名空间下的click事件处理函数
//	$p.off( "click.foo" ); // 移除A


	// 添加事件列表
	var data = { id: 5, name: "张三" };
	var events = {
		"mouseenter": function(event){
			$(this).html( "你好，" + event.data.name + "!");
		},
		"mouseleave": function(event){
			$(this).html( "再见!");
		}
	};
	//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
	$("body").on(events, "#n5", data);
</script>
</body>
</html>